<template> 
    <el-dialog
        title="地址链接"
        :visible.sync="visible"
        fullscreen=true
        @close="handleCancel"
        class="componentSetting"
    >
        <el-container>
            <el-aside width="70%">
                <url-button :config='formData' v-if="proview"></url-button>
            </el-aside>
            <el-main>
                <el-form :model="formData" :rules="rules" :label-positio='"top"' ref="urlButton" label-width="150px">
                    <el-form-item label="链接地址" prop="url">
                        <el-input
                            type="textarea"
                            placeholder="请输入URL"
                            v-model="formData.url">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="链接名称" prop="name">
                        <el-input
                            placeholder="请输入按钮显示名称"
                            v-model="formData.name">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleOk">立即创建</el-button>
                        <el-button @click="handleCancel">取消</el-button>
                        <el-button @click="setProview">预览</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
        
    </el-dialog>
</template>

<script>
import urlButton from "../components/urlButton.vue"
export default {
    components:{
        urlButton
    },
    props: {
        visible: Boolean,
        config: Object,
        model: String
    },
    data(){
        return {
            type: 'urlButton',
            formData: {
                url: '',
                name: '',
                backgroundColor: '',
                id: this.createId()
            },
            proview: false,
            rules: {
                url: [
                    { required: true, message: '请输入链接地址', trigger: 'blur' }
                ],
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        if(this.$props.model === 'update'){
            this.formData.url = this.$props.config.url
            this.formData.name = this.$props.config.name
            this.formData.id = this.$props.config.id
        }
    },
    methods:{
        close(){
            this.$emit('close', this.type)
        },
        save(params){
            this.$emit('save', this.type, this.$props.model, params)
        },
        createId(){
            return Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
        },
        setProview(){
            // this.proview = true
            this.proview = false;
            this.$nextTick(() => {
                this.proview = true
            })
        },
        handleOk(){
            let _this = this
            this.$refs['urlButton'].validate((valid) => {
                if (valid) {
                    _this.save(_this.formData)
                    _this.close()
                } else {
                    return false;
                }
            });
            
        },
        handleCancel(){
            this.close()
        },
    }
    
}
</script>

<style>
.componentSetting .el-dialog__body{
    padding: 0px;
}
.componentSetting .el-aside{
    border-right: 1px solid #e0e0e0;
}
.componentSetting .el-container{
    height: 100%;
}
.componentSetting textarea{
    color: #333 !important;
}
</style>